import Vue from 'vue'
import VueRouter from 'vue-router'
import { message } from "element-ui"
import store from "../store"

// 导入相关路由

const Login = () => import(/* webpackChunkName: "about" */ '../views//login.vue')
const Err = () => import(/* webpackChunkName: "about" */ '../views//err.vue')
const Home = () => import(/* webpackChunkName: "about" */ '../views//home.vue')
const Member = () => import(/* webpackChunkName: "about" */ '../views//member.vue')
const formChilren = () => import(/* webpackChunkName: "about" */ '../views//formChilren.vue')

Vue.use(VueRouter)

// 静态路由
const routes = [

  {
    path: '/login',
    name: 'login',
    meta: {
      required: false
    },
    component: Login,
  }
]

// 静态路由
const endRouter = [

  {
    path: '*',
    name: 'err',
    meta: {
      required: false
    },
    component: Err,
  }
]

// 用于映射路由
let routerNameList = {
  Home,
  Member,

}


// 动态路由
export const asyncRouter = [
  {
    path: '/home',
    name: 'Home',
    meta: {
      val: "home",
      role: ["admin", "normal"],
      required: true
    },
    component: Home,
    children: [
      
      {
        path: 'newpage',
        name: 'newpage',
        meta: {
          val: "newpage",
          role: ["admin"],
          required: true
        },
        component: () => import(/* webpackChunkName: "about" */ '../views//newpage.vue'),
      },
      {
        path: 'formChilren',
        name: 'formChilren',
        meta: {
          val: "formChilren",
          role: ["admin"],
          required: true
        },
        component: formChilren,
      }
    ]
  },
  {
    path: '/member',
    name: 'member',
    meta: {
      val: "member",
      role: ["admin"],
      required: true
    },
    component: Member,

  },
]

// 导出一个专门处理动态路由和映射的函数
// 需要参数 当前从后端获取的路由权限列表
export function handleRouter(routerlist) {
  // console.log(routerlist[0].children.length)

  for (let i = 0; i < asyncRouter.length; i++) {
    for (let j = 0; j < routerlist.length; j++) {
      // 二级路由
      if (asyncRouter[i].name == routerlist[j].name && routerlist[j].children && routerlist[j].children.length > 0) {
        for (let k = 0; k < asyncRouter[i].children.length; k++) {  
          for (let l = 0; l < routerlist[j].children.length; l++) {
            // 子路由
            if (asyncRouter[i].children[k].name == routerlist[j].children[l].name) {
              routerlist[j].children[l].component = asyncRouter[i].children[k].component
   
            }
          }
        }
      }
      // 一级路由
      if (asyncRouter[i].name == routerlist[j].name) {
        routerlist[j].component = asyncRouter[i].component
      }
    }
  }

  // 拼接收尾路由
  routerlist = [...routerlist, ...endRouter]
  router.addRoutes(routerlist); // 一旦刷新这儿添加的动态路由就会消失
}

const router = new VueRouter({
  routes
})


//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.meta.required == true) {
    if (store.state.user.userdata != null) {    // 用户登陆了
      return next()
    }
    message.error("你去的页面需要权限，请先登陆")
    return next("/login")
  } else {
    next()
  }

})

export default router
